<template>
  <!--  -->
  <section class="featured-product-section pb-70">
    <div class="container">
      <div class="section-title">
        <h2>Featured Product</h2>
      </div>

      <ul class="product-selection-tab">
        <li
          :class="currentFeaturedId == 0 ? 'active' : ''"
          @click="filterFeaturedCategory()"
        >
          All <br />
          Item
        </li>
        <template v-for="(item, index) in productTypeListReactive" :key="index">
          <li
            @click="filterFeaturedCategory(item.id)"
            :class="currentFeaturedId == item.id ? 'active' : ''"
          >
            <i :class="item.iconStyle"></i>
            {{ item.title }}
          </li>
        </template>
      </ul>
      <div class="product-tab-gallery row" style="">
        <template
          v-for="(item, index) in featuredProductListReactive"
          :key="index"
        >
          <div
            class="col-sm-6 col-lg-3 pb-30 product-item element-item chair sofa"
            style=""
          >
            <div class="product-card-flat">
              <div class="product-card-thumb">
                <a :href="'/shop/shop-single'">
                  <img
                    :src="require('assets/images/products/product-13.png')"
                    alt="product"
                  />
                </a>
                <ul class="product-card-action">
                  <li>
                    <a @click="addCart(item, 1)">
                      <i class="flaticon-shopping-cart"></i>
                      <span>Add Cart</span>
                    </a>
                  </li>
                  <li>
                    <a class="quick-view-trigger" @click="quickViewOpen(item)">
                      <i class="flaticon-visibility"></i>
                      <span>Quick View</span>
                    </a>
                  </li>
                  <li>
                    <a @click="addWish(item, 1)">
                      <i class="flaticon-like"></i>
                      <span>Add Wishlist</span>
                    </a>
                  </li>
                </ul>
                <div class="product-status">{{ item.featured }}</div>
              </div>
              <div class="product-card-content">
                <h3>
                  <a :href="'/shop/shop-single'">{{ item.title }}</a>
                </h3>
                <p class="product-id">{{ item.code }}</p>
                <div class="product-price">
                  ${{ item.currentPrice }} <del>${{ item.originalPrice }}</del>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </section>
  <!-- 

   -->
  <section class="special-offer-banner pb-100">
    <div class="container">
      <div class="product-banner product-banner-7 product-banner-full">
        <a :href="'/shop/shop-single'" class="product-banner-image"> </a>
        <div class="product-banner-content product-banner-content-sm">
          <small>Sitting chair with flower table</small>
          <h3>New Arrival Products</h3>
          <div class="product-price">$200.50 <del>$230.0</del></div>
          <a :href="'/shop/shop-single'" class="btn main-btn main-btn-radius"
            >Shop Now</a
          >
        </div>
      </div>
    </div>
  </section>
  <!--  -->
  <div class="new-product-section pb-70">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-lg-4 pb-30">
          <div class="product-info-header product-info-header-borderless">
            <h2>Best Seller</h2>
            <div class="carousel-control-arrows">
              <button
                class="bestseller-control-left carousel-control-arrow carousel-control-arrow-radius"
              >
                <i class="flaticon-back"></i>
              </button>
              <button
                class="bestseller-control-right carousel-control-arrow carousel-control-arrow-radius"
              >
                <i class="flaticon-next"></i>
              </button>
            </div>
          </div>
          <div class="best-seller-carousel swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="item">
                  <div class="product-info-card product-info-card-green mb-30">
                    <div class="product-info-card-thumb">
                      <img
                        :src="require('assets/images/products/product-3.png')"
                        alt="product"
                      />
                    </div>
                    <div class="product-info-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'"
                          >New Micro <br />
                          Chairs</a
                        >
                      </h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <a href="javascript:;" class="redirect-link"
                        >Add To Cart</a
                      >
                    </div>
                  </div>
                  <div class="product-info-card product-info-card-violet">
                    <div class="product-info-card-thumb">
                      <img
                        :src="require('assets/images/products/product-13.png')"
                        alt="product"
                      />
                    </div>
                    <div class="product-info-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'"
                          >New Micro <br />
                          Lamps</a
                        >
                      </h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <a href="javascript:;" class="redirect-link"
                        >Add To Cart</a
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="item">
                  <div class="product-info-card product-info-card-green mb-30">
                    <div class="product-info-card-thumb">
                      <img
                        :src="require('assets/images/products/product-13.png')"
                        alt="product"
                      />
                    </div>
                    <div class="product-info-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'"
                          >New Micro <br />
                          Chairs</a
                        >
                      </h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <a href="javascript:;" class="redirect-link"
                        >Add To Cart</a
                      >
                    </div>
                  </div>
                  <div class="product-info-card product-info-card-violet">
                    <div class="product-info-card-thumb">
                      <img
                        :src="require('assets/images/products/product-13.png')"
                        alt="product"
                      />
                    </div>
                    <div class="product-info-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'"
                          >New Micro <br />
                          Lamps</a
                        >
                      </h3>
                      <ul class="review-star">
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                        <li class="full-star"><i class="flaticon-star"></i></li>
                      </ul>
                      <a href="javascript:;" class="redirect-link"
                        >Add To Cart</a
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-navigation disabled">
              <button type="button" class="swiper-button-prev">
                <i class="flaticon-back"></i>
              </button>
              <button type="button" class="swiper-button-next">
                <i class="flaticon-next"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-8 pb-30">
          <div class="product-info-header product-info-header-borderless">
            <h2>Daily Sales</h2>
            <div class="carousel-control-arrows">
              <button
                class="dailysale-control-left carousel-control-arrow carousel-control-arrow-radius"
              >
                <i class="flaticon-back"></i>
              </button>
              <button
                class="dailysale-control-right carousel-control-arrow carousel-control-arrow-radius"
              >
                <i class="flaticon-next"></i>
              </button>
            </div>
          </div>
          <div class="daily-sales-carousel swiper">
            <div class="swiper-wrapper" style="">
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-6.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Mini Table</a>
                      </h3>
                      <p class="product-id">R24HER324</p>
                      <div class="product-price">$120.0 <del>$150.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="
                            require('assets/images/products/product-10.png')
                          "
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Park Sitting Chair</a>
                      </h3>
                      <p class="product-id">R23HY45</p>
                      <div class="product-price">$150.0 <del>$170.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-8.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Simple Sitting Chair</a>
                      </h3>
                      <p class="product-id">TN232EN</p>
                      <div class="product-price">$250.0 <del>$350.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-7.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-1">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Plastic Sitting Chair</a>
                      </h3>
                      <p class="product-id">N23HN456</p>
                      <div class="product-price">$20.0 <del>$33.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-6.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Mini Table</a>
                      </h3>
                      <p class="product-id">R24HER324</p>
                      <div class="product-price">$120.0 <del>$150.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="
                            require('assets/images/products/product-10.png')
                          "
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Park Sitting Chair</a>
                      </h3>
                      <p class="product-id">R23HY45</p>
                      <div class="product-price">$150.0 <del>$170.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide active" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-8.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Simple Sitting Chair</a>
                      </h3>
                      <p class="product-id">TN232EN</p>
                      <div class="product-price">$250.0 <del>$350.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide active" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-7.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-1">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Plastic Sitting Chair</a>
                      </h3>
                      <p class="product-id">N23HN456</p>
                      <div class="product-price">$20.0 <del>$33.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide active" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="require('assets/images/products/product-6.png')"
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter-2">
                        <div class="product-counter-item day2">
                          157<span>days</span>
                        </div>
                        <div class="product-counter-item hour2">
                          23<span>hrs</span>
                        </div>
                        <div class="product-counter-item min2">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec2">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Mini Table</a>
                      </h3>
                      <p class="product-id">R24HER324</p>
                      <div class="product-price">$120.0 <del>$150.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide" style="">
                <div class="item">
                  <div class="product-card-flat">
                    <div class="product-card-thumb">
                      <a :href="'/shop/shop-single'">
                        <img
                          :src="
                            require('assets/images/products/product-10.png')
                          "
                          alt="product"
                        />
                      </a>
                      <ul class="product-card-action">
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-shopping-cart"></i>
                            <span>Add Cart</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;" class="quick-view-trigger">
                            <i class="flaticon-visibility"></i>
                            <span>Quick View</span>
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="flaticon-like"></i>
                            <span>Add Wishlist</span>
                          </a>
                        </li>
                      </ul>
                      <div class="product-status">New</div>
                      <div class="product-counter daily-counter">
                        <div class="product-counter-item day1">
                          127<span>days</span>
                        </div>
                        <div class="product-counter-item hour1">
                          22<span>hrs</span>
                        </div>
                        <div class="product-counter-item min1">
                          6<span>mins</span>
                        </div>
                        <div class="product-counter-item sec1">
                          55<span>sec</span>
                        </div>
                      </div>
                    </div>
                    <div class="product-card-content">
                      <h3>
                        <a :href="'/shop/shop-single'">Park Sitting Chair</a>
                      </h3>
                      <p class="product-id">R23HY45</p>
                      <div class="product-price">$150.0 <del>$170.0</del></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-navigation disabled">
              <button type="button" class="swiper-button-prev">
                <i class="flaticon-back"></i>
              </button>
              <button type="button" class="swiper-button-next">
                <i class="flaticon-next"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--  -->
  <div class="partner-section pb-100">
    <div class="container">
      <div class="partner-carousel swiper">
        <div class="swiper-wrapper" style="">
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="javascript:;">
                <img
                  :src="require('assets/images/partner/partner-1.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="javascript:;">
                <img
                  :src="require('assets/images/partner/partner-2.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="javascript:;">
                <img
                  :src="require('assets/images/partner/partner-3.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="javascript:;">
                <img
                  :src="require('assets/images/partner/partner-4.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
          <div class="swiper-slide" style="">
            <div class="item">
              <a href="javascript:;">
                <img
                  :src="require('assets/images/partner/partner-5.png')"
                  alt="partner"
                />
              </a>
            </div>
          </div>
        </div>
        <div class="swiper-navigation disabled"></div>
        <div class="swiper-pagination disabled"></div>
      </div>
    </div>
  </div>
  <!--  Our Customer Feedback    start-->
  <section class="testimonial-section p-tb-100 bg-yellow bg-shape">
    <div class="container">
      <div class="section-title">
        <h2>Our Customer Feedback</h2>
      </div>
      <div class="testimonial-carousel-3 swiper">
        <div class="swiper-wrapper">
          <template
            v-for="(item, index) in clientFeedbackListReactive"
            :key="index"
          >
            <div class="swiper-slide" style="">
              <div class="item">
                <div class="client-feedback client-feedback-3">
                  <div class="client-feedback-paragraph">
                    <img
                      :src="require('assets/images/quote-secondcolor.png')"
                      alt="quote"
                    />
                    <p
                      style="overflow: hidden; height: 72px"
                      :title="item.content"
                    >
                      {{ item.content }}
                    </p>
                  </div>
                  <div class="client-feedback-autor">
                    <div class="client-feedback-thumb">
                      <img
                        :src="require('assets/images/clients/client-5.jpg')"
                        alt="client"
                      />
                    </div>
                    <div class="client-feedback-author-info">
                      <h3 class="client-feedback-name">{{ item.author }}</h3>
                      <p class="client-feedback-designation">
                        {{ item.designation }}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="swiper-navigation disabled">
          <button type="button" class="">
            <span aria-label="Previous">‹</span>
          </button>
          <button type="button" class="">
            <span aria-label="Next">›</span>
          </button>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </section>
  <!--  Our Customer Feedback    end-->

  <!--  service   -->
  <section class="service-section pt-100 pb-70">
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-6 col-lg-3 pb-30">
          <div class="service-card service-card-secondary">
            <div class="service-card-thumb">
              <i class="flaticon-delivery"></i>
            </div>
            <div class="service-card-details">
              <h3>Free Delivery</h3>
              <p>At home</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 pb-30">
          <div class="service-card service-card-secondary">
            <div class="service-card-thumb">
              <i class="flaticon-alarm"></i>
            </div>
            <div class="service-card-details">
              <h3>Quick Support</h3>
              <p>In 24 hours</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 pb-30">
          <div class="service-card service-card-secondary">
            <div class="service-card-thumb">
              <i class="flaticon-dollar"></i>
            </div>
            <div class="service-card-details">
              <h3>Money Saves</h3>
              <p>Ample amount</p>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-6 col-lg-3 pb-30">
          <div class="service-card service-card-secondary">
            <div class="service-card-thumb">
              <i class="flaticon-verified"></i>
            </div>
            <div class="service-card-details">
              <h3>Protectd Media</h3>
              <p>Ensure security</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End -->

  <!-- Connect Us start -->
  <section class="reach-us-section pb-70">
    <div class="container">
      <div class="row">
        <div class="col-sm-6 pb-30">
          <div class="reach-us-card reach-us-card-1">
            <h3>Connect Us</h3>
            <p>
              Need help? Call <a href="tel:00910-395-5297">+910-395-5297</a>
              <br />
              We always ready to help.
            </p>
            <a href="#" class="redirect-link">Contact Us</a>
          </div>
        </div>
        <div class="col-sm-6 pb-30">
          <div class="reach-us-card reach-us-card-2">
            <h3>Follow Us</h3>
            <p>
              You can easily connect to our social <br />
              Instagram pages.
            </p>
            <a class="redirect-link">Instagram</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Connect Us  end -->

  <!-- Our Recent Arrivals start -->
  <section class="recent-arrival pb-100">
    <div class="container">
      <div class="section-title">
        <h2>Our Recent Arrivals</h2>
      </div>
      <div class="recent-arrival-gallery">
        <div class="row">
          <template
            v-for="(item, index) in featuredProductOriginalListReactive.slice(
              0,
              8
            )"
            :key="index"
          >
            <div
              class="col-sm-6 col-lg-3 pb-30 recent-product-item"
              style="display: block"
            >
              <div class="product-card-flat">
                <div class="product-card-thumb">
                  <a ::href="'/shop/shop-single'">
                    <img
                      :src="require('assets/images/products/product-5.png')"
                      alt="product"
                    />
                  </a>
                  <ul class="product-card-action">
                    <li>
                      <a @click="addCart(item, 1)">
                        <i class="flaticon-shopping-cart"></i>
                        <span>Add Cart</span>
                      </a>
                    </li>
                    <li>
                      <a
                        class="quick-view-trigger"
                        @click="quickViewOpen(item)"
                      >
                        <i class="flaticon-visibility"></i>
                        <span>Quick View</span>
                      </a>
                    </li>
                    <li>
                      <a @click="addWish(item, 1)">
                        <i class="flaticon-like"></i>
                        <span>Add Wishlist</span>
                      </a>
                    </li>
                  </ul>
                  <div class="product-status">{{ item.featured }}</div>
                </div>
                <div class="product-card-content">
                  <h3>
                    <a :href="'/shop/shop-single'">{{ item.title }}</a>
                  </h3>
                  <p class="product-id">{{ item.code }}</p>
                  <div class="product-price">
                    {{ item.currentPrice }} <del>{{ item.originalPrice }} </del>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- <div class="text-center load-more">
        <button class="btn main-btn main-btn-radius load-more-btn">
          <i class="flaticon-loading"></i>
          Load More
        </button>
      </div> 
      -->
    </div>
  </section>
  <!--  -->
  <section class="newsletter-section pb-100 overflow-hidden">
    <div class="container position-relative">
      <div class="bubble-bg-animation">
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-1.png')"
            alt="bubble"
          />
        </div>
        <div class="bubble-item">
          <img
            :src="require('assets/images/bubble-bg/bubble-2.png')"
            alt="bubble"
          />
        </div>
      </div>
      <div class="section-title section-title-lg mb-0 position-relative">
        <h2>
          It's All New, <br />
          Lets Add To Our Newsletter
        </h2>
        <p>
          We are really dedicated to give you the best service and you will be
          able to make a good quality environment on the global market and it
          will help you to get 30% discount in first product buy.
        </p>
      </div>
      <form
        class="newsletter-form newsletter-lg-width mt-25 position-relative"
        novalidate="true"
      >
        <div class="form-group form-group-radius">
          <input
            type="text"
            placeholder="Enter email"
            class="form-control form-control-background"
            id="emails"
            name="EMAIL"
            required=""
          />
          <button
            class="btn main-btn main-btn-radius disabled"
            type="submit"
            style="pointer-events: all; cursor: pointer"
          >
            Subscribe Now
          </button>
        </div>
        <div id="validator-newsletter" class="form-result"></div>
      </form>
    </div>
  </section>
  <!--  -->
  <section class="blog-section pb-70">
    <div class="container">
      <div class="section-title">
        <h2>Our Latest Blogs</h2>
      </div>
      <div class="row">
        <div class="col-sm-6 col-lg-4 pb-30">
          <div class="blog-card">
            <div class="blog-card-thumb">
              <a href="single-blog.html">
                <img
                  :src="require('assets/images/blogs/blog-1.jpg')"
                  alt="blog"
                />
              </a>
            </div>
            <div class="blog-card-content">
              <div class="blog-entry">Mar 03, 2021</div>
              <h3>
                <a href="single-blog.html"
                  >We Produce The Best And The Super Product For You
                </a>
              </h3>
              <ul class="blog-card-action">
                <li>
                  <i class="flaticon-visibility"></i>
                  12.2 K
                </li>
                <li>
                  <i class="flaticon-message"></i>
                  2.5 K
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 pb-30">
          <div class="blog-card">
            <div class="blog-card-thumb">
              <a href="single-blog.html">
                <img
                  :src="require('assets/images/blogs/blog-2.jpg')"
                  alt="blog"
                />
              </a>
            </div>
            <div class="blog-card-content">
              <div class="blog-entry">Mar 02, 2021</div>
              <h3>
                <a href="single-blog.html"
                  >Global Organization Has To A Best Act On Market</a
                >
              </h3>
              <ul class="blog-card-action">
                <li>
                  <i class="flaticon-visibility"></i>
                  33.3 K
                </li>
                <li>
                  <i class="flaticon-message"></i>
                  4.5 K
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 pb-30 offset-sm-3 offset-lg-0">
          <div class="blog-card">
            <div class="blog-card-thumb">
              <a href="single-blog.html">
                <img
                  :src="require('assets/images/blogs/blog-3.jpg')"
                  alt="blog"
                />
              </a>
            </div>
            <div class="blog-card-content">
              <div class="blog-entry">Mar 01, 2021</div>
              <h3>
                <a href="single-blog.html"
                  >We Work To Make A Good &amp; Better Relationship</a
                >
              </h3>
              <ul class="blog-card-action">
                <li>
                  <i class="flaticon-visibility"></i>
                  25.6 K
                </li>
                <li>
                  <i class="flaticon-message"></i>
                  2.9 K
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <quick-view-modal
    :visible="quickViewModalShow"
    :showProduct="showProduct"
    @onClose="quickViewClose"
  ></quick-view-modal>
</template>

<script setup>
import {
  featuredProductList,
  productTypeList,
  clientFeedbackList,
} from "src/mockjs/index.js";

import Swiper, { Navigation, Pagination, Scrollbar, Controller } from "swiper";
import "swiper/css";

import quickViewModal from "./components/QuickViewModal.vue";

import { useShopStore } from "src/stores/shop";
const shopStore = useShopStore();

import {
  reactive,
  toRefs,
  computed,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  quickViewModalShow: false,
  showProduct: {},
  test: "aa",
  //
  featuredProductListReactive: featuredProductList.data,
  featuredProductOriginalListReactive: featuredProductList.data,
  //
  productTypeListReactive: productTypeList,
  //
  currentFeaturedId: 0,
  //
  clientFeedbackListReactive: clientFeedbackList.data,
});
const {
  quickViewModalShow,
  showProduct,
  currentFeaturedId,
  featuredProductListReactive,
  featuredProductOriginalListReactive,
  productTypeListReactive,
  clientFeedbackListReactive,
} = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {
  initSwiper();
});

//自定义方法开始
const quickViewOpen = (item) => {
  data.showProduct = item;
  data.quickViewModalShow = true;
};

const quickViewClose = (event) => {
  data.quickViewModalShow = false;
};

const addCart = (product, quantity) => {
  var cartProduct = {
    ...product,
    quantity: quantity,
  };
  shopStore.addCart(cartProduct);
};

const addWish = (product, quantity) => {
  var cartProduct = {
    ...product,
    quantity: quantity,
  };
  shopStore.addWish(cartProduct);
};

// 过滤特色
const filterFeaturedCategory = (typeId) => {
  //临时列表=原列表
  var featuredProductList = data.featuredProductOriginalListReactive;
  //如果存在，typeId从原列表过滤出来
  if (typeId != 0) {
    data.currentFeaturedId = typeId;

    featuredProductList = featuredProductList.filter((item) => {
      return item.type.id === typeId;
    });
    data.featuredProductListReactive = featuredProductList;
    return;
  }
  data.currentFeaturedId = 0;
  data.featuredProductListReactive = featuredProductList;
};

// 初始化swiper
const initSwiper = () => {
  // dailySlesCarousel
  var dailySalesCarousel = new Swiper(".daily-sales-carousel", {
    modules: [Navigation, Pagination, Controller],
    slidesPerView: 3,
    spaceBetween: 10,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    // 如果需要滚动条
    scrollbar: {
      el: ".swiper-scrollbar",
    },
    //
    breakpoints: {
      576: {
        slidesPerView: 1,
        spaceBetween: 10,
        slidesPerGroup: 1,
      },

      992: {
        slidesPerView: 3,
        spaceBetween: 10,
        slidesPerGroup: 3,
      },
    },
    //
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
  });

  $(".dailysale-control-left").on("click", function () {
    dailySalesCarousel.slidePrev();
  });
  $(".dailysale-control-right").on("click", function () {
    dailySalesCarousel.slideNext();
  });

  //bestSellerCarousel
  var bestSellerCarousel = new Swiper(".best-seller-carousel", {
    modules: [Navigation, Pagination, Controller],
    slidesPerView: 1,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    // 如果需要滚动条
    scrollbar: {
      el: ".swiper-scrollbar",
    },
    //
    breakpoints: {},
    //
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
  });

  $(".bestseller-control-left").on("click", function () {
    bestSellerCarousel.slidePrev();
  });
  $(".bestseller-control-right").on("click", function () {
    bestSellerCarousel.slideNext();
  });
  // testimonialCarousel3
  var testimonialCarousel3 = new Swiper(".testimonial-carousel-3", {
    slidesPerView: 3,
    slidesPerGroup: 3,
    spaceBetween: 10,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      type: "custom",
      renderCustom: function (swiper, current, total) {
        var customPaginationHtml = "";
        for (var i = 0; i < total; i++) {
          //判断哪个分页器此刻应该被激活
          if (i == current - 1) {
            customPaginationHtml +=
              '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';
          } else {
            customPaginationHtml +=
              '<span class="swiper-pagination-customs"></span>';
          }
        }
        return '<div class="swiperPag">' + customPaginationHtml + "</div>";
      },
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    //
    breakpoints: {
      576: {
        slidesPerView: 1,
        spaceBetween: 10,
        slidesPerGroup: 1,
      },
      768: {
        slidesPerView: 2,
        spaceBetween: 10,
        slidesPerGroup: 2,
      },
      992: {
        slidesPerView: 3,
        spaceBetween: 10,
        slidesPerGroup: 3,
      },
    },
    //
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
  });

  var partnerCarousel = new Swiper(".partner-carousel", {
    modules: [Navigation, Pagination, Controller],
    slidesPerView: 3,
    spaceBetween: 10,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    // 如果需要分页器
    pagination: {
      el: ".swiper-pagination",
      type: "bullets",
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },

    // 如果需要滚动条
    scrollbar: {
      el: ".swiper-scrollbar",
    },

    on: {
      click: function (swiper, event) {},
    },
  });
};
</script>

<script>
$(document).ready(function () {
  // Quick view trigger
  // $(".quick-view-trigger").on("click", function (e) {
  //   e.preventDefault();
  //   $(".quick-view-wrapper").addClass("active");
  // });
  // $(".quick-view-close").on("click", function () {
  //   $(".quick-view-wrapper").removeClass("active");
  // });
});
</script>

<style lang="scss" scoped>
.testimonial-carousel-3 {
  :deep(.swiper-pagination) {
    text-align: center;
    margin-top: 10px;

    .swiperPag {
      span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background: #d6d6d6;
        display: inline-block;
        -webkit-backface-visibility: visible;
        transition: opacity 0.2s ease;
        border-radius: 30px;
      }

      .swiper-pagination-customs {
        opacity: 0.62;
        -webkit-transition: all 0.3s linear;
        transition: all 0.3s linear;
        background-color: #4f5ac2;
      }

      .swiper-pagination-customs-active {
        width: 27px;
        opacity: 1;
        background-color: #4f5ac2;
      }
    }
  }
}
</style>
